<template>
    <h1>筛选商品：</h1>
    <div class="search-box">

        <span>商品分类：</span>
        <el-select v-model="category" clearable placeholder="Select" @change="changeCategory">
            <el-option v-for="item in categoryList" :key="item" :label="item" :value="item" />
        </el-select>
        <span>关键字：</span>
        <el-input v-model="search" class="w-20 m-2" size="large" placeholder="Please Input" />
        <el-button @click="searchFn">搜索</el-button>

    </div>
    <el-divider />
    <el-table :data="goodsList" style="width: 100%">

        <el-table-column prop="proid" label="编号" width="180" />
        <el-table-column prop="category" label="分类" width="180" />
        <el-table-column prop="brand" label="品牌" width="180" />
        <el-table-column prop="proname" label="产品名称" width="180" />

    </el-table>

    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30]"
         layout="total, sizes, pager"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>

<script lang="ts" setup>

import { ref, reactive, computed } from 'vue';
import { getCategoryApi, searchProApi } from "@/api/pro";
import type { ISearchPro } from "@/myTypes";
import type { AxiosResponse } from 'axios';

// 四、分页：
// 1)、当前的页码
const currentPage = ref(1);

// 2）、每页显示的条数：
const pageSize = ref(5);

// 3)、总条数：
const total = ref(0);


function handleSizeChange(val:number){
    console.log("val",val);
    pageSize.value = val;

}

function handleCurrentChange(currPage:number){
    // console.log("currentPage",currentPage);    
    currentPage.value = currPage;   
}


// 一、分类相关的数据

// 当前选中的分类
const category = ref('')

// 分类的数据
const categoryList = reactive<Array<string>>([]);

// 获取分类数据
function getCategory() {
    getCategoryApi()
        .then((res: AxiosResponse) => {
            if (res.data.code === "200") {
                categoryList.length = 0;
                categoryList.push(...res.data.data);
            }
        })
}

getCategory();

function changeCategory(val: string) {
    console.log("val", val);
    console.log("category.value", category.value);
}

// 二、搜索的关键字：

// 搜索的关键字
const search = ref("");

//三、 商品列表
// 1）、全部数据；
const allGoodsList = reactive([]);
// 2）、当前页的数据：
const goodsList = computed(()=>allGoodsList.slice((currentPage.value-1)*pageSize.value,currentPage.value*pageSize.value));//每页5条，当前页码：2

function searchFn() {
    // 发送请求获取商品的数据
    console.log("category.value", category.value);
    console.log("search.value", search.value);

    // 查询条件：
    let data: ISearchPro = {
        category:category.value,
        search:search.value
    };
  
    console.log("data",data);

    searchProApi(data)
        .then((res: AxiosResponse) => {
            // console.log("res.data.data", res.data.data);
            allGoodsList.length = 0;
            allGoodsList.push(...res.data.data);
            total.value = allGoodsList.length;
        })
}

</script>

<style scoped>
.search-box {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}

.el-input {
    width: 300px;
}
</style>